<template>
  <div>
    <el-drawer
      title="商机详情"
      :append-to-body="true"
      size="1100px"
      :close-on-press-escape="false"
      :visible.sync="detailData.show"
      direction="rtl"
      :before-close="handleClose"
      :wrapperClosable="false"
    >
      <el-row style="width:1120px;padding-bottom:280px;height:100%;overflow-y:auto">
        <el-col :span="18">
          <el-form
            :model="parames"
            status-icon
            label-position="left"
            ref="parames"
            label-width="94px"
            class="detailForm"
          >
            <el-row style="padding: 0 40px">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="资料" name="info">
                  <el-col :span="24">
                    <p class="formtitle">基本信息</p>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="当前状态:">
                      <p>已转化</p>
                    </el-form-item>
                    <el-form-item label="当前状态:">
                      <p>联系人</p>
                    </el-form-item>
                    <el-form-item label="联系方式:" prop="phone">
                      <p>1333444444</p>
                    </el-form-item>
                    <el-form-item label="客户名称:" prop="name">
                      <p>李总</p>
                    </el-form-item>
                    <el-form-item label="商机来源:" prop="phone">
                      <p>老客户 - 杭州至信企业管理有限公司</p>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="添加标签:">
                      <el-tag size="small">标签一</el-tag>
                    </el-form-item>
                  </el-col>
                  <el-col :span="16">
                    <el-form-item label="推荐方案:" prop="name">
                      <el-button size="small">查看关联方案</el-button>
                    </el-form-item>
                    <el-form-item label="需求概述:" prop="name">
                        <p>三年</p>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <p style="margin-top: 20px" class="formtitle">推荐产品</p>
                  </el-col>
                  <el-col :span="24">
                    <el-table :data="tableData" style="width: 100%">
                      <el-table-column prop="date" label="序号" width="50"></el-table-column>
                      <el-table-column prop="name" label="产品名称" width="180"></el-table-column>
                      <el-table-column prop="address" label="数量"></el-table-column>
                      <el-table-column prop="address" label="单位"></el-table-column>
                      <el-table-column prop="address" label="赠送数量"></el-table-column>
                      <el-table-column prop="address" label="总额(元)"></el-table-column>
                      <el-table-column prop="address" label="操作"></el-table-column>
                    </el-table>
                  </el-col>
                </el-tab-pane>
                <el-tab-pane label="动态" name="dongtai">
                    <el-col :span="24">
                        <el-row>
                            <el-col :span="24">
                                <el-button :type="dongtaiShow?'primary':'text'" size="mini" round @click="dongtaiShow = true">跟进动态</el-button>
                                <el-button size="mini" :type="!dongtaiShow?'primary':'text'" round @click="dongtaiShow = false">操作历史</el-button>
                            </el-col>
                            <el-col :span="24" style="margin-top:30px" v-show="dongtaiShow">
                                <!-- for循环记录 -->
                                <el-row type="flex" style="margin-bottom: 20px" v-for="item in 5" :key="item">  
                                    <el-col style="width: 40px">
                                        <el-avatar size="small"> 李 </el-avatar>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-row>
                                            <el-col :span="24">
                                                <p style="font-size:13px;color:#646464l">
                                                    <span style="color: #bfbfbf">崔文瀚</span>
                                                    <span>添加了</span>
                                                    <span style="color: #bfbfbf">商机 ‧ 记录</span>
                                                    <span style="color: #bfbfbf">2019-11-25 15:09</span>
                                                </p>
                                            </el-col>
                                            <el-col :span="24" style="margin-top:10px;">
                                                <p class="genjin-text">周二上门拜访</p>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="24" style="margin-top:30px" v-show="!dongtaiShow">
                                <el-row type="flex" style="margin-bottom: 20px" v-for="item in 5" :key="item">  
                                    <el-col style="width: 20px">
                                        <i class="el-icon-edit" style="color:#bfbfbf;font-size:12px;"></i>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-row>
                                            <el-col :span="24">
                                                <p style="font-size:13px;color:#646464l">
                                                    <span style="color: #bfbfbf">崔文瀚</span>
                                                    <span>签订合同</span>
                                                    <span style="color: #bfbfbf">2019-11-25 15:09</span>
                                                </p>
                                            </el-col>
                                            <el-col :span="24" style="margin-top:10px;">
                                                <p class="genjin-text2">周二上门拜访</p>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-tab-pane>
              </el-tabs>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="5" style="position: fixed;top:80px;right:-10px;width:240px">
          <div class="form-team-box">
            <div style="margin-bottom: 20px">
              <el-button
                size="small"
                icon="el-icon-search"
                style="width:200px;text-align: left;margin-bottom:10px"
              >查看合同</el-button>
              <el-popover
                placement="bottom"
                width="200"
                trigger="hover"
                >
                <el-row>
                    <el-col>
                        <div class="drp-text">
                            <i class="el-icon-edit"></i>
                            <span>变更来源</span>
                        </div>
                    </el-col>
                </el-row>
                <el-button size="small"  slot="reference" style="width:200px;text-align: left">
                    <i class="el-icon-menu"></i>
                    <span>更多操作</span>
                    <i style="float: right" class="el-icon-arrow-down"></i>
                </el-button>
              </el-popover>
            </div>
            <p class="formtitle">团队成员（1）人</p>
            <el-row>
              <el-col style="margin-bottom:10px">
                <span class="team-icon" style="background: #409efe">李</span>
                <span class="team-name">李四光</span>
              </el-col>
              <el-col>
                <span class="team-icon" style="background: #409efe">李</span>
                <span class="team-name">李四光</span>
                <i class="el-icon-delete team-del"></i>
              </el-col>
            </el-row>
            <el-button type="text" style="margin-top:14px" icon="el-icon-plus">添加新成员</el-button>
          </div>
        </el-col>
      </el-row>

      <div class="detail-from-bottom-box" :class="{height56: !isFabu, height200:isFabu}">
          <el-row type="flex" v-show="!isFabu">
              <el-col style="width:40px;">
                <el-avatar size="small" icon="el-icon-user-solid" style="margin-top:12px"></el-avatar>
              </el-col>
              <el-col :span="24">
                  <el-input type="text" placeholder="添加动态..." size="small" @focus="isFabu = true"></el-input>
              </el-col>
          </el-row>
          <el-row type="flex" v-if="isFabu">
              <el-col style="width:40px;">
                <el-avatar size="small" style="margin-top:12px" icon="el-icon-user-solid"></el-avatar>
              </el-col>
              <el-col :span="24">
                  <el-row>
                      <el-col :span="24">
                            <el-tag size="small">记录</el-tag>
                            <el-tag size="small" type="info">客户上门</el-tag>
                            <el-tag size="small" type="info">投诉</el-tag>
                            <el-tag size="small" type="info">客户回访</el-tag>
                      </el-col>
                      <el-col :span="24">
                          <el-input type="textarea" placeholder="添加动态..." resize="none"></el-input>
                      </el-col>
                      <el-col :span="6">
                          <el-date-picker
                            size="small"
                            type="datetime"
                            placeholder="下次跟进时间">
                            </el-date-picker>
                      </el-col>
                      <el-col :span="18" style="text-align:right">
                          <el-button size="small" type="primary">发布</el-button>
                            <el-button size="small" @click="isFabu = false">取消</el-button>
                      </el-col>
                  </el-row>
              </el-col>
          </el-row>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props: ["detailData"],
  data() {
    return {
        dongtaiShow: true,
        isFabu: false, //是否打开下面的输入跟踪信息
      parames: {
        name: "",
        phoneTpye: "telphone",
        phone: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        color2: "#f00"
      },
      activeName: "info",
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: ["change", "blur"]
          }
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      },
      dynamicTags: ["标签一", "标签二", "标签三"],
      inputVisible: false,
      inputValue: "",
      tableData: []
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleClick() {
      //切换主tab
    },
    handleClose() {
      //关闭弹窗
      this.detailData.show = false;
    },
    handleCloseTag(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    }
  },
  components: {},
  watch: {}
};
</script>

<style scoped>
</style>
